<template>
	<view class="notice-center">
		<base-navbar back-color="#fff" title="消息中心"></base-navbar>
		<view v-if="noticeList.length > 0">
			<view class="cell-card" v-for="(item,index) in noticeList" :key="index">
				<image class="icon" :src="web_host+'/static/images/img-notice-sys.png'" mode="aspectFill"
					v-if="item.type==0">
				</image>
				<image class="icon" :src="web_host+'/static/images/img-notice-order.png'" mode="aspectFill"
					v-else-if="item.type==1"></image>
				<image class="icon" :src="web_host+'/static/images/img-notice-activity.png'" mode="aspectFill" v-else>
				</image>
				<view class="info" @click="pageRoute('/pages/service/notice/notice-detail?id='+item.id)">
					<view class="title">
						<text class="name" v-if="item.type==0">系统消息</text>
						<text class="name" v-else-if="item.type==1">订单消息</text>
						<text class="name" v-else>促销活动</text>
						<text class="time">{{item.create_time}}</text>
					</view>
					<view class="other">
						<text class="desc">{{item.title}}</text>
						<uni-badge text="未读" v-if="!item.isRead"></uni-badge>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<c-empty icon-name="notice" title="暂无通知公告"></c-empty>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const web_host = inject('web_host');

	const state = reactive({
		noticeList: [],
		isMore: false,
	});

	onLoad((opt) => {});

	onShow(() => {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getNoticeList();
		}
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
		if (state.isMore) {
			getNoticeList();
		}
	});

	function getNoticeList() {
		request.get('content/getNoticeList', {
			skip: state.noticeList.length,
			limit: 10,
		}).then(res => {
			console.log('列表', res);
			state.isMore = res.data.is_more;
			if (state.noticeList.length == 0) {
				state.noticeList = res.data.data;
			} else {
				state.noticeList = state.noticeList.concat(res.data.data);
			}
		})
	};

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		noticeList,
		isMore,
	} = toRefs(state);
</script>

<style lang="scss">
	.notice-center {
		padding: $margin-24;

		.cell-card {
			@include f-between;
			margin-bottom: $margin-24;
			padding: $margin-24;
			background-color: $bg-inverse-color;
			border-radius: $radius-12;

			.icon {
				width: 100rpx;
				height: 100rpx;
			}

			.info {
				flex: 1;
				margin-left: $margin-24;

				.title,
				.other {
					@include f-between;
				}

				.name {
					font-size: $font-30;
					font-weight: 500;
					color: $main-color;
				}

				.time,
				.desc {
					font-size: $font-24;
					color: $tips-color;
					font-weight: 400;
				}

				.other {
					margin-top: $margin-12;
				}

				.desc {
					@include ellipsis;
				}
			}
		}
	}
</style>